<template>
  <div class="index">
    <!-- 轮播图 -->
    <div class="swiper-box">
      <div class="container">
        <!-- 左侧菜单栏 -->
        <div class="nav-tab">
          <ul class="tab-wrap">
            <li class="tab-item">
              <a href="javascript:;">手机 电话卡</a>
              <div class="children1">
                <ul
                  class="child-item"
                  v-for="(item, index) in menuList"
                  :key="index"
                >
                  <li v-for="(subitem, subindex) in item" :key="subindex">
                    <a :href="subitem ? '/#/detail/' + subitem.id : ''">
                      <img
                        :src="subitem.img || '/imgs/item-box-3.jpg'"
                        alt=""
                      />
                      <span>{{ subitem.name || '至尊纪念版小米10' }}</span>
                    </a>
                  </li>
                </ul>
              </div>
            </li>
            <li class="tab-item">
              <a href="javascript:;">电视 盒子</a>
              <div class="children"></div>
            </li>
            <li class="tab-item">
              <a href="javascript:;">笔记本 显示器</a>
              <div class="children"></div>
            </li>
            <li class="tab-item">
              <a href="javascript:;">家电 插线板</a>
              <div class="children"></div>
            </li>
            <li class="tab-item">
              <a href="javascript:;">智能 路由器</a>
              <div class="children"></div>
            </li>
            <li class="tab-item">
              <a href="javascript:;">电源 配件</a>
              <div class="children"></div>
            </li>
            <li class="tab-item">
              <a href="javascript:;">健康 儿童</a>
              <div class="children"></div>
            </li>
            <li class="tab-item">
              <a href="javascript:;">耳机 音响</a>
              <div class="children"></div>
            </li>
            <li class="tab-item">
              <a href="javascript:;">生活 箱包</a>
              <div class="children"></div>
            </li>
            <li class="tab-item">
              <a href="javascript:;">出行 穿戴</a>
              <div class="children"></div>
            </li>
          </ul>
        </div>

        <!-- 轮播图 -->
        <swiper ref="mySwiper" :options="swiperOptions">
          <swiper-slide v-for="(item, index) in slideList" :key="index">
            <a href="">
              <img :src="item.img" alt="" />
            </a>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>
    </div>
    <!-- 四列banner -->
    <div class="ads-box">
      <div class="container">
        <ul>
          <li v-for="(item, index) in adsList" :key="index">
            <img v-lazy="item.img" alt="" />
          </li>
        </ul>
      </div>
    </div>
    <div class="container">
      <!-- 大banner -->
      <div class="banner-box">
        <img v-lazy="'/imgs/banner-2.jpg'" alt="" />
      </div>
      <!-- 手机产品盒子 -->
      <div class="phone-box">
        <div class="phone-hd">
          <span>手机</span>
          <a href=""
            >查看全部
            <!-- <span class="iconfont icon-arrow-right "></span> -->
            <span></span>
          </a>
        </div>
        <div class="phone-bd">
          <div class="bd-left">
            <img v-lazy="'/imgs/phone-big.jpg'" alt="" />
          </div>
          <div class="bd-right">
            <ul v-for="(item1, key1) in phoneList" :key="key1">
              <li v-for="(item2, key2) in item1" :key="key2">
                <a :href="'/#/product/'+item2.id">
                  <img v-lazy="item2.mainImage" alt="" />
                  <h3>{{ item2.name }}</h3>
                  <p>{{ item2.subtitle }}</p>
                  <span>{{ item2.price | price }}</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
// import style (>= Swiper 6.x)
// import 'swiper/swiper-bundle.css'
import 'swiper/css/swiper.css'

// import 'swiper/dist/css/swiper.css'

export default {
  data () {
    return {
      // 轮播图配置项
      swiperOptions: {
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        // Some Swiper option/callback...
        // autoplay: true,
        loop: true,
        autoplay: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        effect: 'cube'
      },
      // 轮播图数据
      slideList: [
        {
          id: '42',
          img: '/imgs/slider/slide-1.jpg'
        },
        {
          id: '45',
          img: '/imgs/slider/slide-2.jpg'
        },
        {
          id: '46',
          img: '/imgs/slider/slide-3.jpg'
        },
        {
          id: '',
          img: '/imgs/slider/slide-4.jpg'
        },
        {
          id: '',
          img: '/imgs/slider/slide-1.jpg'
        }
      ],
      //   tab栏子图数据
      menuList: [
        [
          {
            id: 30,
            img: '/imgs/item-box-1.png',
            name: '小米CC9'
          },
          {
            id: 31,
            img: '/imgs/item-box-2.png',
            name: '小米8青春版'
          },
          {
            id: 32,
            img: '/imgs/item-box-3.jpg',
            name: 'Redmi K20 Pro'
          },
          {
            id: 33,
            img: '/imgs/item-box-4.jpg',
            name: '移动4G专区'
          }
        ],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0]
      ],
      // 轮播图下方的广告位数据
      adsList: [
        {
          id: 33,
          img: '/imgs/ads/ads-1.png'
        },
        {
          id: 48,
          img: '/imgs/ads/ads-2.jpg'
        },
        {
          id: 45,
          img: '/imgs/ads/ads-3.png'
        },
        {
          id: 47,
          img: '/imgs/ads/ads-4.jpg'
        }
      ],
      //   手机产品列表
      phoneList: []
    }
  },
  //   轮播图组件
  components: {
    Swiper,
    SwiperSlide
  },
  created () {
    this.getPhoneList()
  },
  methods: {
    //   获取手机产品列表
    getPhoneList () {
      this.$http
        .get('http://mi.futurefe.com/api/products', {
          params: {
            categoryId: '100012',
            pageSize: 14
          }
        })
        .then((res) => {
          res.list = res.list.slice(6, 14)
          this.phoneList = [res.list.slice(0, 4), res.list.slice(4, 8)]
          //   this.phoneList = [res.list.slice(0, 4), res.list.slice(4, 8)]
          // console.log(this.phoneList[0][0])
        })
    }
  },
  filters: {
    price (val) {
      return '¥ ' + val + '元起'
    }
  }
}
</script>

<style lang="scss">
@import '../assets/scss/mixin.scss';
.index {
  .swiper-box {
    background-color: #fff;
    .swiper-container {
      --swiper-navigation-color: #929395; /* 单独设置按钮颜色 */
      --swiper-navigation-size: 28px; /* 设置按钮大小 */
      height: 451px;
      .swiper-button-prev,
      .swiper-container-rtl .swiper-button-next {
        left: 274px;
      }

      //
      a {
        width: 100%;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .nav-tab {
      position: absolute;
      width: 264px;
      height: 451px;
      background-color: rgba(105, 101, 101, 0.6);
      z-index: 9;
      padding: 20px 0;
      box-sizing: border-box;
      ul.tab-wrap {
        li.tab-item {
          height: 42px;
          line-height: 42px;

          &:hover {
            background-color: #ff6600;
            .children1 {
              display: block;
            }
          }
          > a {
            display: inline-block;
            width: 100%;
            box-sizing: border-box;
            padding: 0 30px;
            font-size: 14px;
            color: #fff;
            position: relative;
            &:after {
              content: '';
              position: absolute;
              top: 14px;
              right: 20px;
              display: block;
              width: 16px;
              height: 16px;
              @include bgImg(
                16px,
                16px,
                '../../public/imgs/icon-arrow.png',
                $size: contain
              );
            }
          }
          .children1 {
            display: none;
            position: absolute;
            top: 0;
            left: 264px;
            width: 962px;
            height: 451px;
            // background: rgb(239, 243, 239);
            border: 1px solid #ccc;
            box-sizing: border-box;
            background-color: #fff;
            box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
            ul {
              height: 16.6%;
              display: flex;
              li {
                width: 25%;
                display: flex;
                align-items: center;
                a {
                  display: flex;
                  align-items: center;
                  padding-left: 25px;
                  img {
                    width: 32px;
                    height: 40px;
                  }
                  span {
                    padding-left: 20px;
                    color: #333333;
                    font-size: 14px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .ads-box {
    background-color: #fff;
    padding: 14px 0 31px;
    ul {
      display: flex;
      justify-content: space-between;
      li {
        width: 296px;
        height: 167px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .banner-box {
    height: 120px;
    margin-bottom: 20px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .phone-box {
    height: 674px;
    // border: 1px solid red;
    .phone-hd {
      height: 58px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      > span {
        margin: 0;
        font-size: 22px;
        font-weight: 200;
        line-height: 58px;
        color: #333;
      }
      > a {
        font-size: 16px;
        line-height: 58px;
        color: #424242;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
        padding-right: 27px;
        position: relative;
        span {
          position: absolute;
          top: 18px;
          right: 0;
          display: inline-block;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: #b0b0b0;
          background-image: url('../../public/imgs/icon-arrow.png');
          background-repeat: no-repeat;
          background-position: 7px 2px;
          background-size: 10px;
        }
      }
    }
    .phone-bd {
      display: flex;
      justify-content: space-between;
      height: 616px;
      .bd-left {
        width: 214px;
        height: 100%;
        // float: left;
        margin-right: 15px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .bd-right {
        // float: left;
        flex: 1;
        height: 100%;
        // background: rgb(218, 114, 114);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        ul {
          display: flex;
          justify-content: space-between;
          li {
            width: 234px;
            height: 300px;
            background-color: #fff;
            transition: all 0.3s linear;
            text-align: center;
            a {
              display: block;
              width: 100%;
              height: 100%;
              img {
                width: 234px;
                height: 194px;
                //   margin: 36px 0;
              }
              h3 {
                font-size: 14px;
                font-weight: 400;
                color: #333;
              }
              p {
                margin: 0 10px 10px;
                height: 18px;
                font-size: 12px;
                color: #b0b0b0;
              }
              span {
                color: #ff6700;
                font-size: 14px;
              }
            }
            &:hover {
              box-shadow: 0 0 6px 6px rgba(0, 0, 0, 0.11);
              transform: scale(1.01);
            }
          }
        }
      }
    }
  }
}
</style>
